.form-control {
	box-shadow: none;
	border-radius: 2px;
	border: 1px solid @light-gray;
	&.focus,
	&:focus {
		box-shadow: none;
		border-color: @primary;
	}
	&.rounded {
		border-radius: 100px !important;
	}
}

.radio,
.checkbox,
.switch-button {
	margin-bottom: 15px;
}

.radio-custom,
.checkbox-custom {
	label {
		font-weight: 400;
	}
}

input[type="radio"],
input[type="checkbox"] {
	&[disabled],
	&.disabled,
	fieldset[disabled] & {
		+ label {
			opacity: .65;
		}
	}
	&:focus {
		outline: 0;
	}
}

.radio-inline,
.checkbox-inline {
	padding-left: 0;
}

.checkbox-custom {
	input[type="checkbox"] {
		display: none !important;
		+ label {
			position: relative;
			padding-left: 30px;
			height: 20px;
			cursor: pointer;
			margin-bottom: 0;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 20px;
				height: 20px;
				display: block;
				border: 2px solid @gray;
				outline: 1px solid transparent;
				.transition(all .1s ease-in-out);
			}
			&.checkbox-primary {
				.checkbox-variant(@primary);
			}
			&.checkbox-success {
				.checkbox-variant(@success);
			}
			&.checkbox-warning {
				.checkbox-variant(@warning);
			}
			&.checkbox-error {
				.checkbox-variant(@danger);
			}

		}
		&:checked + label {
			&:before {
				height: 10px;
				border-top-style: none;
				border-right-style: none;
				.rotate(-45deg);
			}
		}
	}
}
// Checkbox

.checkbox-variant(@border-color) {
	&:before {
		border-color: @border-color;
	}
}

.radio-custom {
	input[type="radio"] {
		display: none !important;
		+ label {
			position: relative;
			padding-left: 30px;
			height: 20px;
			cursor: pointer;
			margin-bottom: 0;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 20px;
				height: 20px;
				display: block;
				border: 2px solid @gray;
				border-radius: 50%;
			}
			&.radio-primary {
				.radio-variant-before(@primary);
			}
			&.radio-success {
				.radio-variant-before(@success);
			}
			&.radio-warning {
				.radio-variant-before(@warning);
			}
			&.radio-error {
				.radio-variant-before(@danger);
			}
			&:after {
				content: '';
				position: absolute;
				width: 12px;
				height: 12px;
				top: 4px;
				left: 4px;
				display: block;
				border-radius: 50%;
				.transition(all .1s ease-in-out);
				.scale(0);
			}
		}
		&:checked + label {
			&:after {
				background-color: @gray;
				.scale(1);
			}
			&.radio-primary {
				.radio-variant-after(@primary);
			}
			&.radio-success {
				.radio-variant-after(@success);
			}
			&.radio-warning {
				.radio-variant-after(@warning);
			}
			&.radio-error {
				.radio-variant-after(@danger);
			}
		}
	}
}
// Radio button

.radio-variant-before(@border-color) {
	&:before {
		border-color: @border-color;
	}
}

.radio-variant-after(@background-color) {
	&:after {
		background-color: @background-color;
	}
}

// Switch Button

.switch-button {
	input[type="radio"],
	input[type="checkbox"] {
		display: none !important;
		+ label {
			position: relative;
			cursor: pointer;
			margin-bottom: 0;
			width: 44px;
			height: 18px;
			background-color: @light-gray;
			border-radius: 100px;
			.transition(background 0.3s);
			&:before {
				content: "";
				position: absolute;
				top: -3px;
				left: -2px;
				width: 24px;
				height: 24px;
				background-color: @white;
				border-radius: 50%;
				.box-shadow-helper(2);
				.transition(margin 0.3s);
			}
		}
		&:checked + label {
			background-color: lighten(@gray, 10%);
			&:before {
				margin-left: 24px;
				background-color: @gray;
			}
			&.switch-primary {
				.switch-variant(@primary);
			}
			&.switch-success {
				.switch-variant(@success);
			}
			&.switch-info {
				.switch-variant(@info);
			}
			&.switch-warning {
				.switch-variant(@warning);
			}
			&.switch-error {
				.switch-variant(@danger);
			}
			&.switch-purple {
				.switch-variant(@purple);
			}
			&.switch-orange {
				.switch-variant(@orange);
			}
			&.switch-pink {
				.switch-variant(@pink);
			}
			&.switch-green {
				.switch-variant(@green);
			}
			&.switch-lime {
				.switch-variant(@lime);
			}
			&.switch-black {
				.switch-variant(@lighter-black);
			}
		}
	}
}

.switch-variant(@background-color) {
	background-color: lighten(@background-color, 10%);
	&:before {
		background-color: @background-color;
	}
}

// Form control sizing

.form-group-lg {
	.form-control {
		border-radius: 2px;
	}
}

.form-group-sm {
	.form-control {
		border-radius: 2px;
	}
}

// Feedback icon

.form-control-feedback {
	line-height: 34px;
}

.input-lg + .form-control-feedback,
.input-group-lg + .form-control-feedback,
.form-group-lg .form-control + .form-control-feedback {
	font-size: 18px;
	line-height: 46px;
}

.input-sm + .form-control-feedback,
.input-group-sm + .form-control-feedback,
.form-group-sm .form-control + .form-control-feedback {
	font-size: 12px;
	line-height: 30px;
}


// Feedback states

.has-primary {
	.form-control-validation(@primary; @primary; @primary);
}
.has-success {
	.form-control-validation(@success; @success; @success);
}
.has-warning {
	.form-control-validation(@warning; @warning; @warning);
}
.has-error {
	.form-control-validation(@danger; @danger; @danger);
}

// Form validation states
//
// Used in forms.less to generate the form validation CSS for warnings, errors,
// and successes.

.form-control-validation(@text-color; @border-color; @background-color) {
	.help-block,
	.control-label,
	.radio,
	.checkbox,
	.radio-inline,
	.checkbox-inline,
	&.radio label,
	&.checkbox label,
	&.radio-inline label,
	&.checkbox-inline label  {
		color: @text-color;
		font-weight: 600;
	}
	// Set the border and box shadow on specific inputs to match
	.form-control {
		border-color: @border-color;
		box-shadow: none;
		&:focus {
			box-shadow: none;
			border-color: @border-color;
		}
	}
	// Set validation states also for addons
	.input-group-addon {
		color: @text-color;
		border-color: @border-color;
		background-color: transparent;
	}
	// Optional feedback icon
	.form-control-feedback {
		color: @text-color;
	}
}

// Inline forms

.form-inline {
	.form-group {
		margin-right: 15px;

	}
	@media(max-width: 767px) {
		.form-group {
			margin-right: 0;
		}
	}
}